/* 聊天框样式 */  
.con1 {  
    border: 1px solid #f0c0e6;   
    border-radius: 10px;  
    padding: 20px;  
    margin-top: 20px;  
    box-shadow: 0 0 10px rgba(255, 100, 200, 0.1);   
    width: 1300px;  
    height: 800px;  
    background-color: #fff; 
    width: 70%;   
    float: left; 
}  
/* 消息列表样式 */  
#show {    
    padding: 10px;  
    background-color: #f7f2f0;   
    border-radius: 10px;  
    max-height: 300px;  
    overflow-y: auto;  
}  
  
#show p {  
    margin: 0 0 10px;  
    padding: 5px 10px;  
    border-radius: 5px;  
}  
 
/* 输入框和按钮样式 */  
#box {  
    display: flex;  
    margin-top: 10px;  
    background-color: #fff;  
    padding: 5px;  
    border-radius: 5px;  
    box-shadow: 0 0 5px rgba(255, 100, 200, 0.1);   
}  
  
#inp {  
    flex: 1;  
    padding: 5px 10px;  
    border-radius: 5px 0 0 5px;   
    border: none;  
    background-color: #f7f2f0;   
}  
  
#but {  
    padding: 5px 10px;  
    background-color: #ff69b4;   
    color: #fff;  
    border: none;  
    border-radius: 0 5px 5px 0;   
    cursor: pointer;  
    margin-left: 10px;  
}  
  
/* 输入框聚焦时样式 */  
#inp:focus {  
    outline: none;  
    box-shadow: 0 0 5px #ff69b4;  
}
/* 右侧侧边栏样式 */  
.sidebar {  
    width: 30%;  
    float: right;   
    background-color: #f7f2f0;  
    padding: 20px;  
    box-sizing: border-box; /* 包括内边距和边框在元素的总宽度和总高度内 */  
    border-radius: 10px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 30px;  
}  
  
.sidebar h3 {  
    margin-top: 0;  
    color: #ff69b4;  
}  
  
.product-showcase {  
    margin-bottom: 20px;  
}  
  
.product {  
    display: flex; /*  弹性布局 */
    align-items: center;  
    margin-bottom: 10px;  
}  
  
.product img {  
    width: 50px;  
    height: 50px;  
    border-radius: 5px;  
    margin-right: 10px;  
}  